<template>
  <view class="tab-bar">
    <!--  循环每个 item 菜单 -->
    <!-- 定义两个class，一个是默认的样式tab-bar-item，一个是中间凸起的样式code-->
    <view v-for="(item,index) in tabBarList" :key="index" :class="{'tab-bar-item': item.id!=2,code:item.id==2}"
      @click="switchTab(item, index)">
      <view class="tab_text" :style="{color: selected == index ? selectedColor : color}">
        <!-- 图标，当前选中就是selectedIconPath，否则就是默认的iconPath-->
        <image class="tab_img"
			v-if="index!=2"
		 :src="selected == index ? item.selectedIconPath : item.iconPath"></image>
		 <view v-else class="active">
		 	<image 
		 	 :src="selected == index ? item.selectedIconPath : item.iconPath"></image>
		 </view>
        <!-- 中间菜单不显示文字，index不是1的显示文字-->
        <template v-if="index!==2">
          <view>{{ item.text }}</view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  
  export default {
  	components: {},
	props: {
		selected: {
		  type: Number,
		  default: 0
		}
	},
  	data() {
  		return {
			color: '#7C7C7C',
			selectedColor: '#0F6DF0',
			tabBarList: [
				{
				    "id": 0,
					"pagePath": "/pages/home/home",
					"iconPath": "/static/image/tabbar/home.png",
					"selectedIconPath": "/static/image/tabbar/homeactive.png",
					"text": "首页"
				},
				{
					"id": 1,
					"pagePath": "/pages/travel/travel",
					"iconPath": "/static/image/tabbar/travel.png",
					"selectedIconPath": "/static/image/tabbar/travelactive.png",
					"text": "出行"
				},
				{
					"id": 2,
					"pagePath": "/pages/release/release",
					"iconPath": "/static/image/tabbar/middle.png",
					"selectedIconPath": "/static/image/tabbar/middle.png",
					"text": "中间"
				},
				{
					"id": 3,
					"pagePath": "/pages/share/share",
					"iconPath": "/static/image/tabbar/nav.png",
					"selectedIconPath": "/static/image/tabbar/navactive.png",
					"text": "分享"
				},
				{
					"id": 4,
					"pagePath": "/pages/mine/mine",
					"iconPath": "/static/image/tabbar/mine.png",
					"selectedIconPath": "/static/image/tabbar/mineactive.png",
					"text": "我的"
				}
			],
  		};
  	},
  	mounted() {
		// 隐藏原生TabBar
		// uni.hideTabBar();
  	},
	methods: {
		switchTab: (item) => {
		  let url = item.pagePath;
		  // uni.switchTab({
		  //   url
		  // })
		  uni.reLaunch({
		          url: url
		        });
		}
	}
  };

  // // 子组件传递参数
  // const props = defineProps({
  //   selected: {
  //     type: Number,
  //     default: 0
  //   }
  // })

  // 默认颜色
  // let color = ref('#000')
  // 选中的颜色
  // let selectedColor = ref('#ffb2b2')
  // 菜单栏集合 - 与 pages.json -> tabbar 配置一样
  // let tabBarList = ref([
		// {
		// 	"id": 0,
		// 		"pagePath": "/pages/home/home",
		// 		"iconPath": "../../static/component.png",
		// 		"selectedIconPath": "../../static/componentHL.png",
		// 		"text": "首页1"
		// 	},
		// 	{
		// 		"id": 1,
		// 		"pagePath": "/pages/travel/travel",
		// 		"iconPath": "../../static/component.png",
		// 		"selectedIconPath": "../../static/componentHL.png",
		// 		"text": "出行"
		// 	},
		// 	{
		// 		"id": 2,
		// 		"pagePath": "/pages/release/release",
		// 		"iconPath": "../../static/image/home/navadd.png",
		// 		"selectedIconPath": "../../static/image/home/navadd.png",
		// 		"text": ""
		// 	},
		// 	{
		// 		"id": 3,
		// 		"pagePath": "/pages/share/share",
		// 		"iconPath": "../../static/api.png",
		// 		"selectedIconPath": "../../static/apiHL.png",
		// 		"text": "分享"
		// 	},
		// 	{
		// 		"id": 4,
		// 		"pagePath": "pages/mine/mine",
		// 		"iconPath": "static/api.png",
		// 		"selectedIconPath": "static/apiHL.png",
		// 		"text": "我的"
		// 	}
  // ])
  // // 隐藏原生TabBar
  // uni.hideTabBar();
  // // 跳转tabBar菜单栏
  // const switchTab = (item) => {
  //   let url = item.pagePath;
  //   uni.switchTab({
  //     url
  //   })
  // }
</script>

<style lang="less" scoped>
  // 外部装修
  .tab-bar {
    position: fixed;
    bottom: 0;
	width: 100vw;
    left: 0rpx;
    right: 0rpx;
    height: 190rpx;
    background: white;
    // padding: 10rpx;
    display: flex;
	flex-direction: row;
    // justify-content: center;
    // align-items: center;
	align-items: flex-start;
	z-index: 10;
    box-shadow: 0 4px 15px rgba(165, 168, 171, 0.83) !important;
	padding-bottom: 68rpx;
	box-sizing: border-box;

    // 给每个 item 设置样式
    .tab-bar-item {
      //flex: 0.5;
	  flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      // width: 150rpx;
      // padding: 15rpx;
      background-color: transparent;
      transition: all 0.5s ease-in-out;
      margin: auto;

      // 限制每个icon的大小
      .tab_img {
        // width: 37rpx;
        // height: 41rpx;
		width: 56rpx;
		height: 56rpx;
      }

      // 限制文字大小
      .tab_text {
        font-size: 20rpx;
        margin-top: 9rpx;
        flex: 1;
      }
    }

    //中间凸起扫码
    .code {
      position: relative;
      top: -29rpx;
      width: 116rpx;
      height: 116rpx;
      border-radius: 50%;
      // background-color: #2b9939;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
	  

      // 限制每个icon的大小
    //   .tab_img {
		  // width: 108rpx;
		  // height: 108rpx;
		  
    //   }
	  
	  .active {
		  border: 4rpx solid #fff;
		  border-radius: 50%;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  image {
			  width: 108rpx;
			  height: 108rpx;
		  }
	  }
	  
    }
  }
</style>
